import { useState } from 'react';

type Step = 'hospital' | 'department' | 'doctor' | 'time' | 'confirm';

export default function Appointment() {
  const [step, setStep] = useState<Step>('hospital');
  const [hospital, setHospital] = useState<string>('');
  const [department, setDepartment] = useState<string>('');
  const [doctor, setDoctor] = useState<string>('');
  const [time, setTime] = useState<string>('');

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">预约挂号</h2>
      <Progress step={step} />

      {step === 'hospital' && (
        <Picker title="选择医院" items={["市人民医院", "市中医院", "市妇幼保健院"]} onPick={(v) => { setHospital(v); setStep('department'); }} />
      )}

      {step === 'department' && (
        <Picker title="选择科室" items={["内科", "外科", "儿科", "妇产科", "皮肤科"]} onPick={(v) => { setDepartment(v); setStep('doctor'); }} />
      )}

      {step === 'doctor' && (
        <Picker title="选择医生" items={["张医生 主任医师", "李医生 副主任", "王医生 主治"]} onPick={(v) => { setDoctor(v); setStep('time'); }} />
      )}

      {step === 'time' && (
        <Picker title="选择时段" items={["明天 上午", "明天 下午", "后天 上午"]} onPick={(v) => { setTime(v); setStep('confirm'); }} />
      )}

      {step === 'confirm' && (
        <div className="rounded-2xl bg-white p-4 shadow-sm space-y-2">
          <Row k="医院" v={hospital} />
          <Row k="科室" v={department} />
          <Row k="医生" v={doctor} />
          <Row k="时段" v={time} />
          <button className="mt-3 w-full rounded-xl bg-brand-600 py-3 text-white font-medium">提交预约</button>
        </div>
      )}
    </div>
  );
}

function Progress({ step }: { step: Step }) {
  const order: Step[] = ['hospital', 'department', 'doctor', 'time', 'confirm'];
  const map: Record<Step, string> = { hospital: '医院', department: '科室', doctor: '医生', time: '时段', confirm: '确认' };
  const idx = order.indexOf(step);
  return (
    <div className="flex items-center gap-2 text-xs text-gray-600">
      {order.map((s, i) => (
        <div key={s} className="flex items-center gap-2">
          <span className={`rounded-full px-2 py-1 ${i <= idx ? 'bg-brand-50 text-brand-700' : 'bg-gray-100'}`}>{map[s]}</span>
          {i < order.length - 1 && <span>›</span>}
        </div>
      ))}
    </div>
  );
}

function Picker({ title, items, onPick }: { title: string; items: string[]; onPick: (v: string) => void }) {
  return (
    <div className="rounded-2xl bg-white p-4 shadow-sm">
      <div className="mb-2 font-medium">{title}</div>
      <div className="grid grid-cols-2 gap-2">
        {items.map((it) => (
          <button key={it} className="rounded-xl border bg-gray-50 px-4 py-3 text-left hover:border-brand-500" onClick={() => onPick(it)}>
            {it}
          </button>
        ))}
      </div>
    </div>
  );
}

function Row({ k, v }: { k: string; v: string }) {
  return (
    <div className="flex items-center justify-between text-sm text-gray-700">
      <span className="text-gray-500">{k}</span>
      <span>{v}</span>
    </div>
  );
}


